<template>
  <el-popover placement="right" :width="250" trigger="click" ref="closepopover">
    <template #reference>
      <img class="box-img" :style="{ 'margin-top': update.marginTop, 'margin-left': update.marginLeft }" :src="imgClose"
        alt="" />
    </template>
    <div class="popover-Con">
      <div class="popover-title">
        确认关闭
      </div>
      <el-radio-group v-model="radio">
        <el-radio label="keep">退出当前程序保持后台运行</el-radio>
        <el-radio label="quit">退出ADW小助手</el-radio>
        <el-radio label="logout">注销登录并退出</el-radio>
      </el-radio-group>
      <div class="btn-foot">
        <el-button round @click="closePopover">取消</el-button>
        <el-button round type="primary" @click="confirmPopover">确认</el-button>
      </div>
    </div>
  </el-popover>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import { isElectron } from "@/utils";
import imgClose from '@/assets/search/close.svg';
import { userLogoutService } from "@/utils/api.ts";
import { useRouter } from "vue-router";

const router = useRouter();
export default defineComponent({
  name: "closePop",
  props: ['type'],
  setup(props) {
    const closepopover = ref(false);
    const update = computed(() => {
      const marginTop = props.type === 'chat' ? '2px' : '3px';
      const marginLeft = props.type === 'chat' ? '16px' : '16px';
      return {
        marginTop,
        marginLeft
      }
    });
    const radio = ref('keep');
    const closeSearch = () => {
      if (!isElectron()) return
      const { ipcRenderer } = require("electron");
      ipcRenderer.invoke("closeSearch");
    }

    function closePopover() {
      closepopover.value.hide()
    }

    async function logout() {
      let info = await userLogoutService();
      if (info?.code === '0') {
        localStorage.clear();
        if (isElectron()) {
          quitApp()
        } else {
          router.push("/login");
        }
      }
    }

    function quitApp() {
      if (!isElectron()) return
      const { ipcRenderer } = require("electron");
      ipcRenderer.invoke("closeApp");
    }

    function confirmPopover() {
      closePopover()
      if (radio.value === 'keep') {
        closeSearch()
      } else if (radio.value === 'quit') {
        quitApp()
      } else {
        logout()
      }
    }

    return {
      update,
      imgClose,
      radio,
      closepopover,
      closePopover,
      confirmPopover,
    };
  },
});
</script>
<style>
.el-popover.el-popper {
  border-radius: 10px;
}
</style>
<style scoped lang="scss">
.box-img {
  width: 16px;
  height: 16px;
  margin-left: 30px;
  cursor: pointer;
}

.text {
  margin-left: 10px;
  vertical-align: middle;
}

.popover-Con {
  padding: 8px;
}

.popover-title {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 22px;
  padding-bottom: 14px;
}

.btn-foot {
  margin-top: 16px;
  display: flex;
  justify-content: end;
}
</style>
